<!DOCTYPE html>
<%-- by Paolo Ciccarese --%>

<html>
  	<head>
	    <meta name="layout" content="main" />
	    <g:javascript library="jquery" plugin="jquery"/>
	    <title>:: User - ${item?.firstName} ${item?.lastName} <g:if test="${item?.displayName?.length()>0}">(${item.displayName})</g:if></title>
	  	<style type="text/css">

		.tablescroll
		{ font: 12px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color:#fff; }
		 
		.tablescroll td, 
		.tablescroll_wrapper,
		.tablescroll_head,
		.tablescroll_foot
		{ border:1px solid #ccc; }
		 
		.tablescroll td
		{ padding:3px 5px; }
		 
		.tablescroll_wrapper
		{ border-left:0; }
		 
		.tablescroll_head
		{ font-size:11px; font-weight:bold; background-color:#eee; border-left:0; border-top:0; margin-bottom:3px; }
		 
		.tablescroll thead td
		{ border-right:0; border-bottom:0; }
		 
		.tablescroll tbody td
		{ border-right:0; border-bottom:0; }
		 
		.tablescroll tbody tr.first td
		{ border-top:0; }
		 
		.tablescroll_foot
		{ font-weight:bold; background-color:#eee; border-left:0; border-top:0; margin-top:3px; }
		 
		.tablescroll tfoot td
		{ border-right:0; border-bottom:0; }
	  	
	  	</style>
	  	<script type="text/javascript" src="${resource(dir:'js',file:'jquery.tablescroll.js',plugin:'users-module')}"></script>
	  	<script type="text/javascript" src="${resource(dir:'js',file:'jquery.dateFormat-1.0.js',plugin:'users-module')}"></script>
	  	<script type="text/javascript">

		  	$(document).ready(function() {

		  		/*
			  	$.fn.tableScroll.defaults =
			  	{
			  		flush: true, // makes the last thead and tbody column flush with the scrollbar
			  		width: null, // width of the table (head, body and foot), null defaults to the tables natural width
			  		height: 100, // height of the scrollable area
			  		containerClass: 'tablescroll' // the plugin wraps the table in a div with this css class
			  	};
			  	*/
		  	
		  		
		  		$('#groupsTable').tableScroll({height:200});
		  		 
		  		// other examples
		  	 
		  		// sets the table to have a scrollable area of 200px
		  		//$('#groupsTable').tableScroll({height:20}); 
		  	 
		  		// sets a hard width limit for the table, setting this too small 
		  		// may not always work
		  		$('#groupsTable').tableScroll({width:400}); 
		  	 
		  		// by default the plugin will wrap everything in a div with this 
		  		// css class, if it finds that you have manually wrapped the 
		  		// table with a custom element using this same css class it 
		  		// will forgo creating a container DIV element
		  		$('#groupsTable').tableScroll({containerClass:'tablescroll'});

			  	
			  	var dataToSend = { id: '${item.id}' };
			  	$.ajax({
			  	  	url: "/UsersModule/usersAjax/userGroups",
			  	  	context: $("#groupsContent"),
			  	  	data: dataToSend,
			  	  	success: function(data){
			  			$("#groupsSpinner").css("display","none");
			  			var label = data.length == 1 ? data.length + ' Group' : data.length + ' Groups';
			  			$("#groupsTitle").text(label);
			  			$.each(data, function(i,item){
			  				$('#groupsTable').append('<tr><td><a href="http://tochange.org/' + item.group.id + '">' + item.group.name 
					  				+ '</a></td><td>' + item.role.label + '</td><td>'+ item.dateCreated + '</td></tr>');
			  		    });
				  	}
			  	});  
			});	
	  	</script>
	  	    <script type="text/javascript">
	function setDefaultValue() {
		var eAjaxIcon = document.getElementById('ajaxIcon');
		eAjaxIcon.style.display="inline"
	}
    
	function addResults(response) {  
		var eAjaxIcon = document.getElementById('ajaxIcon');
		eAjaxIcon.style.display="none"

		var eAjaxIcon = document.getElementById('ajaxIcon');
		
		var eResults = document.getElementById('results');
		if (eResults.style.display=="none") eResults.style.display="block"

		var eContent = document.getElementById('content');
		while(eContent.firstChild) {
			eContent.removeChild(eContent.firstChild);
		}

		for(var i=0; i< response.length; i++) {
			var eTr = document.createElement('tr');

		    var cb = document.createElement('input');
		    cb.type = 'checkbox';
		    cb.name = 'community';
		    cb.value = response[i].id;
		    cb.appendChild(document.createTextNode('community'));
			
			var check = document.createElement('td');
			check.appendChild(cb);
			eTr.appendChild(check);
			
			var eUsername = document.createElement('td');
			var eLink = document.createElement('a');
			eLink.href = "showGroup/" + response[i].id;
			eLink.innerHTML = response[i].name;
			eUsername.appendChild(eLink);
			eTr.appendChild(eUsername);

			var eAdmin = document.createElement('td');
			eAdmin.innerHTML = response[i].shortName;
			eTr.appendChild(eAdmin);
			var eMgr = document.createElement('td');
			eMgr.innerHTML = response[i].description;
			eTr.appendChild(eMgr);
			var eDat = document.createElement('td');
			eDat.innerHTML = response[i].dateCreated;
			eTr.appendChild(eDat);
			var eUsr = document.createElement('td');
			eUsr.innerHTML = response[i].status.label;
			eTr.appendChild(eUsr);
			var eCnt = document.createElement('td');
			eCnt.innerHTML = response[i].membersCounter;
			eTr.appendChild(eCnt);
			eContent.appendChild(eTr);
		}
	}
	</script>
  	</head>

	<body>
		<table>
			<tr>
				<td valign="top">
					<g:render template="/users/ajaxManageUserGroups" />
				</td>
			</tr>
			<tr>
				<td valign="top">
					<%-- <g:render template="/users/createGroupForm" /> --%>
				</td>
			</tr>
			<tr>
				<td valign="top">
					<g:render template="/users/searchGroupForm" />
				</td>
			</tr>
			<tr>
				<td valign="top">
					<g:render template="/users/searchCommunityResults" />
				</td>
			</tr>
		</table>
	</body>
</html>